<template>
  <div class="recommended-hotels">
    <div class="section-header">
      <h2>推荐酒店</h2>
      <p>为您精选优质酒店</p>
    </div>
    
    <div class="hotels-grid">
      <el-card
        v-for="hotel in hotels"
        :key="hotel.id"
        class="hotel-card"
        @click="viewHotelDetail(hotel)"
      >
        <div class="hotel-image">
          <img :src="hotel.image" :alt="hotel.name" />
          <div class="hotel-badge" v-if="hotel.badge">
            {{ hotel.badge }}
          </div>
        </div>
        
        <div class="hotel-info">
          <h3 class="hotel-name">{{ hotel.name }}</h3>
          <p class="hotel-location">
            <el-icon><Location /></el-icon>
            {{ hotel.location }}
          </p>
          
          <div class="hotel-rating">
            <el-rate
              v-model="hotel.rating"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
            />
            <span class="review-count">({{ hotel.reviewCount }}条评价)</span>
          </div>
          
          <div class="hotel-facilities">
            <el-tag
              v-for="facility in hotel.facilities.slice(0, 3)"
              :key="facility"
              size="small"
              type="info"
            >
              {{ facility }}
            </el-tag>
          </div>
          
          <div class="hotel-price">
            <div class="price-info">
              <span class="current-price">¥{{ hotel.price }}</span>
              <span class="price-unit">/晚起</span>
              <span class="original-price" v-if="hotel.originalPrice">
                ¥{{ hotel.originalPrice }}
              </span>
            </div>
            <div class="discount" v-if="hotel.discount">
              {{ hotel.discount }}折
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <div class="view-more">
      <el-button type="primary" size="large" @click="viewAllHotels">
        查看更多酒店
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Location } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const hotels = ref([
  {
    id: 1,
    name: '北京王府井希尔顿酒店',
    location: '北京市东城区王府井大街',
    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400&h=300&fit=crop',
    rating: 4.5,
    reviewCount: 1234,
    price: 800,
    originalPrice: 1000,
    discount: 8,
    badge: '热门',
    facilities: ['免费WiFi', '健身房', '游泳池', '停车场', '餐厅']
  },
  {
    id: 2,
    name: '上海外滩华尔道夫酒店',
    location: '上海市黄浦区中山东一路',
    image: 'https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=400&h=300&fit=crop',
    rating: 4.8,
    reviewCount: 856,
    price: 1200,
    originalPrice: 1500,
    discount: 8,
    badge: '推荐',
    facilities: ['江景房', 'SPA', '商务中心', '礼宾服务', '酒吧']
  },
  {
    id: 3,
    name: '广州珠江新城丽思卡尔顿酒店',
    location: '广州市天河区珠江新城',
    image: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=400&h=300&fit=crop',
    rating: 4.6,
    reviewCount: 967,
    price: 900,
    originalPrice: 1100,
    discount: 8.2,
    badge: '特惠',
    facilities: ['城市景观', '行政酒廊', '健身中心', '水疗中心', '会议室']
  },
  {
    id: 4,
    name: '深圳福田香格里拉大酒店',
    location: '深圳市福田区益田路',
    image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400&h=300&fit=crop',
    rating: 4.4,
    reviewCount: 743,
    price: 750,
    originalPrice: 950,
    discount: 7.9,
    badge: '新开业',
    facilities: ['免费WiFi', '健身房', '游泳池', '商务中心', '餐厅']
  },
  {
    id: 5,
    name: '杭州西湖国宾馆',
    location: '杭州市西湖区杨公堤',
    image: 'https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop',
    rating: 4.7,
    reviewCount: 1123,
    price: 650,
    originalPrice: 800,
    discount: 8.1,
    badge: '湖景',
    facilities: ['湖景房', '园林景观', '茶室', '会议室', '停车场']
  },
  {
    id: 6,
    name: '成都春熙路JW万豪酒店',
    location: '成都市锦江区红星路',
    image: 'https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=400&h=300&fit=crop',
    rating: 4.3,
    reviewCount: 892,
    price: 580,
    originalPrice: 720,
    discount: 8.1,
    badge: '市中心',
    facilities: ['免费WiFi', '健身房', '商务中心', '餐厅', '礼宾服务']
  }
])

const viewHotelDetail = (hotel: any) => {
  ElMessage.info(`查看酒店详情：${hotel.name}`)
  // 这里可以跳转到酒店详情页面
}

const viewAllHotels = () => {
  ElMessage.info('查看更多酒店')
  // 这里可以跳转到酒店列表页面
}
</script>

<style scoped>
.recommended-hotels {
  padding: 40px 20px;
  background: #fff;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.section-header p {
  color: #666;
  font-size: 16px;
}

.hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.hotel-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.hotel-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hotel-card:hover .hotel-image img {
  transform: scale(1.05);
}

.hotel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.hotel-info {
  padding: 20px;
}

.hotel-name {
  font-size: 18px;
  color: #333;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.hotel-location {
  color: #666;
  font-size: 14px;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hotel-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.review-count {
  color: #999;
  font-size: 12px;
}

.hotel-facilities {
  margin-bottom: 15px;
}

.hotel-facilities .el-tag {
  margin-right: 6px;
  margin-bottom: 4px;
}

.hotel-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #e6a23c;
}

.price-unit {
  color: #666;
  font-size: 14px;
}

.original-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
  margin-left: 8px;
}

.discount {
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.view-more {
  text-align: center;
}

.view-more .el-button {
  padding: 12px 40px;
  font-size: 16px;
}
</style>

